<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../lib/bootstrap-3.3.7.css" rel="stylesheet">
    <style>
        #dv>div:last-child{
            width: 600px;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -300px;
            z-index: 1000;
        }
        .mask{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: rgba(0,0,0,.7);
        }
        #dv form{
            margin-bottom: 20px;
        }
        #dv .panel .panel-heading{
            position: relative;
        }
        #dv .panel .panel-heading .panel-title{
            padding: 0 0 20px 0;
        }
        #dv .panel .panel-heading .btn-group{
            position: absolute;
            right: 60px;
            top: 0;
        }
        #dv .panel .panel-body{
            padding: 15px 30px;
        }
        #dv .panel .panel-heading .btn-group:hover .dropdown-menu{
            display: block;
        }
        #dv .panel .panel-heading .btn-group .dropdown-menu{
            min-width: 100px;
            top:95%;
        }
    </style>
    <script src="../lib/vue-2.4.0.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('POST','../login/validateLogin.php',false)
        xhr.onreadystatechange=function () {
            if(this.readyState===4){
                let data = JSON.parse(this.responseText)
                if(data.code==200){
                    return
                }else{
                    location.href='sign.html'
            }
            }
        }
        xhr.send()
    </script>
</head>
<body>
    <div id="dv">
        <div class="mask" v-show="flag"></div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">学生表</h3>
                <a href="course.html" class="btn btn-default">课程表</a>
                <a href="studentchoosecourse.html" class="btn btn-default">学生选课表</a>
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{ user }}<span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#" @click.prevent="signout">退出</a></li>
                    </ul>
                </div>
            </div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="Name2">名字</label>
                        <input type="text" class="form-control" id="Name2" placeholder="名字" v-model="name">
                    </div>
                    <div class="form-group">
                        <label for="Name">年龄</label>
                        <input type="number" class="form-control" id="Name" placeholder="年龄" v-model="age">
                    </div>
                    <div class="form-group">
                        <label>性别：</label>
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios1" value="1" checked v-model="sex">
                            男
                        </label>
                        <label>
                            <input type="radio" name="optionsRadios" id="optionsRadios2" value="2" v-model="sex">
                            女
                        </label>
                    </div>
                </form>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="InputName">大学</label>
                        <input type="text" class="form-control" id="InputName" placeholder="大学" v-model="edu">
                    </div>
                    <div class="form-group">
                        <label>城市：</label>
                        <select class="form-control" v-model="city">
                            <option value="1">北京</option>
                            <option value="2">福州</option>
                            <option value="3">厦门</option>
                            <option value="4">龙岩</option>
                            <option value="5">泉州</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="InputName1">学号</label>
                        <input type="number" class="form-control" id="InputName1" placeholder="学号" v-model="no">
                    </div>
                    <button type="button" class="btn btn-primary" @click.prevent="add">添加</button>
                </form>

                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>名字</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>大学</th>
                        <th>城市</th>
                        <th>学号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.sex==1?'男':'女' }}</td>
                        <td>{{ item.age}}</td>
                        <td>{{ item.edu}}</td>
                        <td>{{ item.city | cityFormat}}</td>
                        <td>{{ item.no}}</td>
                        <td>
                            <a href="" class="btn btn-primary" @click.prevent="modify(item.id)">修改</a>
                            <a href="" class="btn btn-warning" @click.prevent="del(item.id)">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>

                <nav aria-label="Page navigation">
                    <ul class="pagination" v-if="list">
                        <li>
                            <a href="#" aria-label="Previous" @click.prevent="prev">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li v-for="index in Math.ceil(total / showStudent.size)">
                            <a href="#" @click.prevent="choosePage(index)">{{ index }}</a>
                        </li>
                        <li>
                            <a href="#" aria-label="Next" @click.prevent="next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="panel panel-primary" v-show="flag">
            <div class="panel-heading">
                <h3 class="panel-title">修改学生表</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="input2" class="col-sm-2 control-label">名字</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="input2" placeholder="名字" v-model="upname">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="Name1" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="Name1" placeholder="年龄" v-model="upage">
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别：</label>
                        <div class="col-sm-10">
                            <label>
                                <input type="radio" name="optionsRadios" value="1" checked v-model="upsex">
                                男
                            </label>
                            <label>
                                <input type="radio" name="optionsRadios" value="2" v-model="upsex">
                                女
                            </label>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="InputName2" class="col-sm-2 control-label">大学</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="InputName2" placeholder="大学" v-model="upedu">
                        </div>

                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">城市：</label>
                        <div class="col-sm-10">
                            <select class="form-control" v-model="upcity">
                                <option value="1">北京</option>
                                <option value="2">福州</option>
                                <option value="3">厦门</option>
                                <option value="4">龙岩</option>
                                <option value="5">泉州</option>
                            </select>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="InputName11" class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="InputName11" placeholder="学号" v-model="upno">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" class="btn btn-primary" @click="update">确定</button>
                            <button type="button" class="btn btn-warning" @click="flag=false">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

<script src="../js/student.js"></script>
</body>
</html>